<template>
	<div class="login">
		<el-row>
			<el-col :span="3">
				<div class="grid-content grid-flex">
					<i class="el-icon-back icon-left" @click="goBack"></i>
				</div>
			</el-col>
			<el-col :span="3" :offset="18">
				<div class="grid-content grid-flex">
					<i class="el-icon-s-operation icon-left"></i>
				</div>
			</el-col>
		</el-row>
		<!-- <h2>登录页面</h2> -->
		<div class="login-tip">
			<div class="login-img">
				<img src="https://img1.baidu.com/it/u=3880675220,92835199&fm=26&fmt=auto" >
			</div>
			<div class="l-text">
				<h3>登录至 Bangumi</h3>
				<!-- <i class="el-icon-bottom"></i> -->
			</div>
		</div>
		
		<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="80px" class="demo-ruleForm form">
			<el-form-item label="手机号" prop="phone" class="label">
				<el-input type="phone" v-model="ruleForm.phone" autocomplete="off" class="input"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass" class="label">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off" class="input"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">登录</el-button>
				<el-button type="info" @click="reg">注册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
// import {login} from '../../api/api.js'
// import {DBUser} from '../../db.js'
import axios from 'axios'
export default{
	name:'Login',
	data() {
		return{
			ruleForm: {
				phone:'',
				pass: '',
			}
		}
	},
	methods: {
		/*
		async submitForm() {
			// console.log(this.ruleForm)
			let result =await this.$refs.ruleForm.validate();
			// console.log(result)
			if(!result) return;
			const user = DBUser.findUser(this.ruleForm)
			if(user){
				this.$message({
					message:'登录成功!',
					type:'success'
				});
				this.$store.dispatch('Login',user)
				this.$router.push({name:"My"})
			}else{
				this.$message({
					message:'账号或密码错误!请重新输入',
					type:'falie'
				});
			}
		},*/
		async submitForm(){
			/*
			login({phone:this.ruleForm.phone,psd:this.ruleForm.pass,}).then( res => {
				console.log(res)
			})
			*/
			let result =await this.$refs.ruleForm.validate();
			if(!result){
				return;
			}else{
				axios.get('http://127.0.0.1:8787/user/login?phone='+this.ruleForm.phone+'&psd='+this.ruleForm.pass+'').then(res => {
					// console.log(res);
					if(res.data.status==1000){
						this.$message({
							message:'登录成功!',
							type:'success'
						});
						this.$store.dispatch('Login',res.data.data)
						this.$router.push({name:"My"})
					}else if(res.data.status==1001){
						this.$message({
							message:'账号或密码错误!请重新输入',
							type:'falie'
						});
					}else{
						this.$message({
							message:'该用户未注册，请先注册！',
							type:'falie'
						});
					}
				}).catch(error => {
					console.log(error);
				});
				
			}
		},
		goBack(){
			this.$router.go(-1);
		},
		reg(){
			this.$router.push({path:'/register'})
		}
	}
}
</script>

<style scoped>
.login .el-row{
	background: #b5d9ff;
}
.login .el-col {
	border-radius: 4vw;
}
.login .grid-content {
	border-radius: 4vw;
	min-height: 12vw;
}
.login .grid-flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.login .icon-left{
	font-weight: 600;
	font-size: 1.25rem;
	color: #fff;
}
.login-tip{
	width: 100%;
	display: flex;
	align-items: flex-end;
}
.login-img{
	width: 50vw;
}
.login-img img{
	width: 100%;
	font-weight: left;
	vertical-align: center;
}
.l-text{
	color: #8ac3ff;
}
.l-text i{
	font-size: 6vw;
	font-weight: 600;
}
.login .form{
	width: 96%;
	margin: 0 auto;
	border: 1px solid #DFDFDF;
	box-sizing: border-box;
}
.login .form .label{
	font-weight: 600;
	font-size: 8vw;
}
.login .form .label:nth-child(1){
	margin-top: 8vw;
}
.login .form .input{
	width: 80%;
}
</style>
